import React from "react";
import { Button, List, Skeleton, Avatar, Pagination, message } from "antd";
import "./style.less";
import { json } from "../../utils/ajax";
import VideoModal from "./VideoModal";
import { copyToClipboard } from "../../utils/util";

class videoList extends React.Component {
  state = {
    title: this.props.location.data.title,
    showVideoModal: false,
    loading: false,
    videoList: [],
    pageNo: 1,
    pageSize: 10,
    total: 0,
  };
  componentDidMount() {
    const { id } = this.props.location.data;
    this.getvideoList(id);
  }
  changePage = (page) => {
    this.getvideoList(this.props.location.data.id, 10, page);
  };
  getvideoList = async (id, pageSize = 10, pageNo = 1) => {
    let res = await json.get("/video/list", {
      id: id || this.props.location.data.id,
      pageSize,
      pageNo,
    });
    if (res.status === 0) {
      this.setState({
        videoList: res.data.list,
        pageNo: res.data.pageNo,
        pageSize: res.data.pageSize,
        total: res.data.total || 0,
      });
    } else {
      message.error("获取视频列表失败");
    }
  };
  showModal = (bool) => {
    this.setState({
      showVideoModal: bool !== undefined ? bool : true,
    });
  };
  deleteVideo = async (item) => {
    const { id } = item;
    const res = await json.post("/video/delete", {
      id: id,
    });
    if (res.status === 0) {
      this.getvideoList();
    } else {
      message.error("删除失败");
    }
  };
  copyLink = (item) => {
    copyToClipboard(item.url, message.success);
  };
  render() {
    const { videoList, showVideoModal } = this.state;
    console.log(videoList, "videoList");
    return (
      <div className="video-list-wrapper">
        <div className="top-btn">
          <Button
            className="add-vedio-btn"
            onClick={(e) => {
              this.showModal();
            }}
            icon="plus"
            type="primary"
            shape="round"
          >
            新增视频
          </Button>
          <Button type="primary"> {this.state.title} </Button>
        </div>
        <div>
          <List
            dataSource={videoList}
            renderItem={(item) => (
              <List.Item
                actions={[
                  <a key="list-loadmore-edit" onClick={(e) => this.copyLink(item)}>
                    复制链接
                  </a>,
                  <a key="list-loadmore-edit" onClick={(e) => this.deleteVideo(item)}>
                    删除
                  </a>,
                ]}
              >
                <Skeleton avatar title={false} loading={item.loading} active>
                  <List.Item.Meta
                    avatar={<Avatar src={item.imgUrl} />}
                    title={<a href="https://ant.design"> {item.title} </a>}
                    description={item.description}
                  />
                </Skeleton>
              </List.Item>
            )}
          ></List>
        </div>
        <div>
          {showVideoModal ? (
            <VideoModal
              typeId={this.props.location.data.id}
              videoVisible={this.showModal}
              visible={showVideoModal}
              onCreated={this.getvideoList}
            />
          ) : (
            ""
          )}
        </div>
        <div className="pagination-footer">
          <Pagination
            pageSize={10}
            defaultCurrent={1}
            showTotal={(total) => `总数${this.state.total}`}
            total={this.state.total}
            onChange={this.changePage}
          />
        </div>
      </div>
    );
  }
}

export default videoList;
